import { BizKfExtraProColumnType } from '@/components';
import * as API from '@/services';
import { Divider, message, Space, Typography } from 'antd';
import { KfModal, KfPagingTablePage, KfPagingTablePagePropsAction, useBackendEnum } from 'kf-web-library';
import React, { useRef } from 'react';
import { useLocation, useAccess } from 'umi';
import QuickForm from './components/QuickForm';
import './index.less';
import numeral from 'numeral';
import { render } from 'react-dom';
import {MailOutlined, PhoneOutlined} from "@ant-design/icons";

type Entity = API.JournalSubscribe;
type EntityPageQueryParams = API.JournalSubscribePageQueryParams;
const entityTypeName = '订阅记录';
const EntityQuickForm = QuickForm;

interface EntityTableListProps {}

/**
 * 订阅记录 列表页面
 */
const EntityTableList: React.FC<EntityTableListProps> = (props) => {
  const location = useLocation();
  const access = useAccess();
  const { enumDict, enumTypeDict, getBackendEnum } = useBackendEnum();
  const actionRef = useRef<KfPagingTablePagePropsAction<Entity, EntityPageQueryParams>>();

  return (
    <KfPagingTablePage<Entity, EntityPageQueryParams, BizKfExtraProColumnType>
      actionRef={actionRef}
      entityTypeName={entityTypeName}
      pagingQuery={API.queryJournalSubscribes}
      opActionsDef={{
        single: {
          deleteOne: (record) => {
            KfModal.deleteConfirm(record.id, () => {
              API.deleteJournalSubscribe(record.id!).then((res) => {
                if (res.flag) {
                  message.info('删除成功');
                  actionRef.current?.reload();
                }
              });
            });
          },
        },
        multi: {
          deleteMultiple: (records) => {
            KfModal.batchActionConfirm('删除', records.length, () => {
              API.deleteJournalSubscribes(records.map((r) => r.id!)).then((res) => {
                if (res.flag) {
                  message.info('批量删除成功');
                  actionRef.current?.reload();
                }
              });
            });
          },
        },
      }}
      opFloatingsDef={{
        noargs: {
          createModal: () => ({
            title: `新建`,
            content: <EntityQuickForm formType={'create'} />,
          }),
        },
        single: {
          modifyModal: (record) => ({
            title: `编辑`,
            content: <EntityQuickForm formType={'modify'} bizId={record.id} />,
          }),
          viewModal: (record) => ({
            fltType: 'modal',
            title: null,
            width: 900,
            content: <EntityQuickForm formType={'view'} bizId={record.id} />,
          }),
        },
      }}
      proTable={{
        tableBarActions: (action, rows) => {
          return [];
        },
        search: {
          optionRender: (searchConfig, formProps, dom) => [...dom],
        },
      }}
      columns={[
        {
          title: '关键字',
          dataIndex: 'searchText',
          sorter: false,
          hideInTable: true,
          hideInForm: true,
          fieldProps: {
            placeholder: '订单号',
          },
        },
        {
          title: '所属期刊',
          dataIndex: 'journalId',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          valueType: 'hxJournalPicker',
        },
        {
          title: '订阅载体',
          dataIndex: 'displayType',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          kfValueEnum: 'SubscribeDisplayType',
        },
        {
          title: '订阅刊时',
          dataIndex: 'timeType',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          kfValueEnum: 'SubscribeTimeType',
        },
        {
          title: '订阅日期',
          width: 130,
          dataIndex: nameof<Entity>((x) => x.subscribeDate),
          sorter: false,
          hideInSearch: false,
          valueType: 'dateRange',
          render: (text, record) => {
            return record.subscribeDate
          }
        },
        {
          title: '退订日期',
          dataIndex: 'unsubscribeTime',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          valueType: 'dateRange',
        },
        {
          title: '订阅期数',
          dataIndex: 'periodCount',
          sorter: false,
          hideInSearch: false,
          hideInTable: true,
          valueType: 'digitRange',
        },
        {
          title: '订单',
          dataIndex: nameof.split<Entity>((x) => x.order.id),
          width: 200,
          sorter: false,
          hideInSearch: true,
          ellipsis: true,
          render: (text, record) => {
            return (
              <div>
                <div>{record.order?.orderNo}</div>
                <div>订阅载体: {getBackendEnum('SubscribeDisplayType', record.order?.displayType)?.i18EnumDesc}</div>
                <div>订阅刊时: {getBackendEnum('SubscribeTimeType', record.order?.timeType)?.i18EnumDesc}</div>
              </div>
            );
          },
        },

        {
          title: '用户',
          width: 150,
          dataIndex: nameof.split<Entity>((x) => x.user.nickname),
          sorter: false,
          hideInSearch: true,
          render: (text, record) => {
            return (
              <div>
                <div>{record.user?.nickname}</div>
                {record.user?.phone && <div><PhoneOutlined /> {record.user?.phone}</div>}
                {record.user?.email && <div><MailOutlined /> {record.user?.email}</div>}
              </div>
            );
          },
        },
        {
          title: '订阅期刊',
          dataIndex: nameof.split<Entity>((x) => x.journal.journalNameCn),
          sorter: false,
          hideInSearch: true,
          render: (text, record) => {
            const ret = `共订阅${record.order?.periodCount}期，已交付${record.order?.periodCount}期`
            return (
              <div>
                <div>{record.journal?.journalNameCn}</div>
                <div>{ret}</div>
              </div>
            )
          }
        },
        {
          title: '支付金额',
          width: 90,
          dataIndex: nameof.split<Entity>((x) => x.order.totalPrice),
          sorter: false,
          hideInSearch: true,
          render: (text, record) => {
            return <>￥{numeral(record.order?.totalPrice / 100).format('0.00')}</>;
          },
        },
        {
          title: '支付日期',
          width: 140,
          dataIndex: nameof.split<Entity>((x) => x.order.paymentTime),
          sorter: false,
          hideInSearch: true,
        },
        {
          title: '订阅状态',
          dataIndex: 'status',
          width: 70,
          hideInSearch: false,
          kfValueEnum: "SubscribeStatus"
        },
        {
          title: '操作',
          fixed: 'right',
          width: 60,
          dataIndex: 'option',
          valueType: 'option',
          render: (_, record) => (
            <Space size={0} split={<Divider type="vertical" />}>
              <a onClick={() => {
                actionRef.current?.openFloating.single?.viewModal(record, 'modal')
              }}>详情</a>
            </Space>
          ),
        },
      ]}
    />
  );
};

export default EntityTableList;
